<template>
  <div :class="['main-view', { 'collapsed-sidebar': isCollapsed }]">
    <!-- 侧边栏 -->
    <el-aside width="200px" :class="{ 'is-collapsed': isCollapsed }" class="sidebar">
      <div class="sidebar-content">
        <div class="sidebar-header" >
          <el-avatar icon="el-icon-s-home" class="sidebar-logo"></el-avatar>
          <span v-if="!isCollapsed" class="guan">管理系统</span>
        </div>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="handleSelect"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>殡仪管理</span>
            </template>
            <el-submenu index="1-1-1">
              <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>灵车管理</span>
            </template>
            <el-menu-item index="/funeral-management/car-status"><i class="el-icon-circle-check"></i>灵车状态</el-menu-item>
              <el-menu-item index="/funeral-management/car-scheduling"><i class="el-icon-date"></i>灵车排期</el-menu-item>
            <!-- <el-submenu index="1-1">
              <template slot="title">
                <i class="el-icon-truck"></i>
                <span>灵车管理</span>
              </template>
            </el-submenu> -->
            <!-- <el-submenu index="1-2">
              <template slot="title">
                <i class="el-icon-truck"></i>
                <span>保存设备管理</span>
              </template>
            <el-menu-item index="/funeral-management/device-status"><i class="el-icon-monitor"></i>设备状态</el-menu-item> -->
          </el-submenu>
            <el-submenu index="1-3">
              <template slot="title">
                <i class="el-icon-collection"></i>
                <span>火葬设备管理</span>
              </template>
              <el-menu-item index="/funeral-management/current-device-status"><i class="el-icon-video-camera"></i>设备状态</el-menu-item>
              <el-menu-item index="/funeral-management/cremation-scheduling"><i class="el-icon-collection-tag"></i>火葬排期</el-menu-item>
            </el-submenu>
          </el-submenu>
            <el-submenu index="1-4">
              <template slot="title">
                <i class="el-icon-s-flag"></i>
                <span>殡仪服务</span>
              </template>
              <el-menu-item index="/funeral-management/package-configuration"><i class="el-icon-tickets"></i>套餐配置</el-menu-item>
              <el-menu-item index="/funeral-management/price-management"><i class="el-icon-price-tag"></i>价格管理</el-menu-item>
              <el-menu-item index="/funeral-management/evaluation-management"><i class="el-icon-star-off"></i>评价管理</el-menu-item>
            </el-submenu>
            <el-submenu index="1-5">
              <template slot="title">
                <i class="el-icon-s-flag"></i>
                <span>预约管理</span>
              </template>
              <el-menu-item index="/reservation-management/reservation-service"><i class="el-icon-tickets"></i>预约管理</el-menu-item>
              <el-menu-item index="/reservation-management/timetable-display"><i class="el-icon-price-tag"></i>预约时间表</el-menu-item>
            </el-submenu>
            <el-submenu index="1-6">
              <template slot="title">
                <i class="el-icon-s-flag"></i>
                <span>场地管理</span>
              </template>
              <el-menu-item index="/site-management/site-reservation"><i class="el-icon-tickets"></i>场地预约</el-menu-item>
              <el-menu-item index="/site-management/site-usage-statistics"><i class="el-icon-price-tag"></i>场地使用情况</el-menu-item>
            </el-submenu>
          <!-- </el-submenu> -->
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-finance"></i>
              <span>财务管理</span>
            </template>
            <el-menu-item index="/financial-management/fee-records"><i class="el-icon-document"></i>费用支付记录</el-menu-item>
            <el-menu-item index="/financial-management/financial-reports"><i class="el-icon-data-analysis"></i>财务报表</el-menu-item>
            <!-- <el-menu-item index="/financial-management/fee-reminders"><i class="el-icon-alarm-clock"></i>费用提醒和催缴</el-menu-item> -->
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-shop"></i>
              <span>增值管理</span>
            </template>
            <el-menu-item index="/value-added-management/inventory-management"><i class="el-icon-box"></i>售卖产品库存管理</el-menu-item>
            <!-- <  el-menu-item index="/value-added-management/white-event-configuration"><i class="el-icon-suitcase-1"></i>白事/超度配置管理</el-menu-item> -->
          </el-submenu>

          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-s-cooperation"></i>
              <span>客户/合作方管理</span>
            </template>
            <el-menu-item index="/customer-partner-management/customer-information"><i class="el-icon-user"></i>客户信息管理</el-menu-item>
            <el-menu-item index="/customer-partner-management/partner-information"><i class="el-icon-phone"></i>合作方信息管理</el-menu-item>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>人员管理</span>
            </template>
            <el-menu-item index="/personnel-management/permission-management"><i class="el-icon-lock"></i>权限管理</el-menu-item>
            <el-menu-item index="/personnel-management/information-management"><i class="el-icon-s-custom"></i>信息管理</el-menu-item>
            <el-menu-item index="/personnel-management/scheduling-management"><i class="el-icon-date"></i>排版管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </el-aside>

    <!-- 右侧内容 -->
    <el-container>
      <el-header v-if="!isDashboard">
        <!-- 顶部栏内容 -->
        <div class="header-content">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>当前页面</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="header-tools">
            <el-button icon="el-icon-menu" @click="toggleSidebar"></el-button>
            <el-button icon="el-icon-full-screen" @click="toggleFullScreen"></el-button>
            <el-button icon="el-icon-s-marketing" @click="navigateToDashboard"></el-button>
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-avatar icon="el-icon-user" class="avatar-icon"></el-avatar>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click="navigateToProfile">个人中心</el-dropdown-item>
                <el-dropdown-item>设置</el-dropdown-item>
                <el-dropdown-item @click="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>

export default {
  data() {
    return {
      isDashboard: false,
      isCollapsed: false,
      activeIndex: '/'
    };
  },
  methods: {
  toggleSidebar() {
    this.isCollapsed = !this.isCollapsed;
  },
  handleSelect(key, keyPath) {
    this.$router.push(key).catch(err => {
      if (err.name !== 'NavigationDuplicated') {
        throw err;
      }
    });
  },
  toggleFullScreen() {
    const doc = document.documentElement;
    if (!document.fullscreenElement) {
      doc.requestFullscreen();
    } else if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  },
  navigateToDashboard() {
    this.isCollapsed = true; // 收起侧边栏
    this.$router.push('/next/dashboard').catch(err => {
      if (err.name !== 'NavigationDuplicated') {
        throw err;
      }
    });
  },
  navigateToProfile() {
    this.$router.push('/profile').catch(err => {
      if (err.name !== 'NavigationDuplicated') {
        throw err;
      }
    });
  },
  logout() {
    // 处理登出逻辑
  },
}

};
</script>

<style lang="less" scoped>
.main-view {
  display: flex;
  height: 100vh;
}
.el-aside {
  transition: width 0.2s;
  background-color: #545c64;
}
.is-collapsed {
  width: 64px !important;
}
.sidebar {
  width: 200px;
  height: 100%;
  background-color: #545c64;
  position: relative;
  overflow: hidden;
}
.sidebar-content {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
}
.sidebar-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.sidebar-header {
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
}
.sidebar-logo[data-v-17e69338] {
  margin: 0 !important;
}
.sidebar-logo[data-v-17e69338]{
  margin: 0;
}
.sidebar-logo {
  margin-right: 10px;
}
.el-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.el-menu{
  border: none !important;
}
.el-header {
  background: #fff;
  /* line-height: 60px; */
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.header-tools {
  display: flex;
  align-items: center;
}
.header-tools .el-button,
.guan {
  margin-left: 10px;
}
.avatar-icon {
  margin-left: 20px;
}
.el-main {
  flex: 1;
  background: #f0f2f5;
  padding: 20px;
}
.el-menu {
  border: none !important;
}
.el-header[data-v-17e69338]{
  height: 61px !important;
}
.myspan{
  margin-left: 10px;
}
</style>
